<div id="parent" style="padding: 50px; background-color: lightblue;">
    Parent Div
    <div id="child" style="padding: 20px; background-color: lightcoral;">
        Child Div
    </div>
</div>

<script>
    // 具有捕获阶段的父元素点击事件  
    document.getElementById('parent').addEventListener('click', function (event) {
        // 设定一些条件  
        let condition = true; // 根据实际情况修改  

        if (condition) {
            console.log('Parent clicked in capturing phase. Cancel child event.');
            event.stopPropagation(); // 如果需要，阻止事件在冒泡阶段继续传播  
        }
        // 如果不需要阻止，parent 可以继续执行其他逻辑  
    }, true); // 指定捕获阶段  

    // 子元素的点击事件  
    document.getElementById('child').addEventListener('click', function (event) {
        console.log('Child clicked');
        // 这里可以执行子元素的点击事件操作  
    });  
</script>